<?php
$reply = lang('reply_colon');
$realname = lang('realname');
$mobile = lang('mobile');
$content = lang('content');
$submit = lang('submit');
$alizi_root = C('ALIZI_ROOT');

$aliziComment = <<<EOF
<style>
.recom_list{margin:12px;border:0}
.recom_list dt{background:none;display:block;padding-bottom:5px;}
.recom_list dd{margin-left:0;margin-bottom:8px;border-bottom:1px solid #ccc;padding-bottom:8px;padding-left:0}
.recom_list .fr{float:right}
.recom_list .reply{border:1px solid #eed3d7;background:#fbeedf;url("http://download.csdn.net/images/commend_reply.png") no-repeat 3px 3px;padding:5px;margin-top:10px;color:#D00;border-radius:2px;}

.comment-frame{padding:10px;10px;position:relative;display: none}
.comment-frame .alizi-rows{display: block}
.comment-frame .alizi-rows input{
    margin-bottom: 10px;
}
.comment-frame .alizi-rows textarea{
    resize: none;
}
.comment-frame .rows-head b{color:#f00;}
.comment-frame .rows-params{margin-left:0}
[class^="diamond-"],[class^="heart-"]{margin-left:5px;margin-bottom:-3px;display:inline-block;height:16px;background:url('{$alizi_root}Public/Alizi/diamond.gif');background-position:left bottom;}
[class^="heart-"]{background:url('{$alizi_root}Public/Alizi/heart.gif');}
.diamond-1,.heart-1{width:16px;}
.diamond-2,.heart-2{width:32px;}
.diamond-3,.heart-3{width:48px;}
.diamond-4,.heart-4{width:64px;}
.diamond-5,.heart-5{width:80px;}
.comment-title{color:#999;text-indent:0.5em;}
#comments p{line-height:1.5em;}
.user_name{color: #f00;padding-right: 10px;}
.user_date{font-size: 12px;color: #666;padding-left: 10px;}
.write-comment{position: absolute;top: 0;right: 0;display: inline-block;padding: .6rem;height: 2rem;font-size: 14px;line-height: 2rem;}
</style>
<div  class="box-content" style="overflow-x: hidden;background-color: rgba(255, 255, 255, .5);">
    <div class="alizi-title alizi-title-order alizi-border ellipsis" style="position: relative">
        <i class="icon-comment"></i>
        評論
        <span class="write-comment">寫評論</span>
    </div>
    <div class="comment-frame alizi-theme-thin">
		<form action="{$alizi_root}index.php?m=Order&a=comment" method="POST" id="aliziComment">
            <div class="alizi-rows">
                <input type="text" name="name" id="commentName" class="alizi-input-text" placeholder="{$realname}">
                <input type="text" name="mobile" id="commentMobile" class="alizi-input-text" placeholder="{$mobile}">
                <textarea name="content" id="commentContent" class="alizi-input-text" style="height:60px !important;border:1px solid #ccc;" cols="4"  placeholder="{$content}"></textarea>
            </div>
            <div class="alizi-rows alizi-id-btn clearfix">
                <div class="rows-params"><input type="submit" class="alizi-btn alizi-submit1" value="提交"></div>
                <input type="hidden" name="item_id" value="{$info['id']}">
            </div>
		</form>
	</div>
	<div class="recom_list" id="comments"></div>
	<div><a href="javascript:;" id="commentsAjax" class="alizi-btn" data-page="0">点击加载更多(<b></b>)条评论</a></div>
</div>
<div class="use_know">
<p style="background-color: rgb(255, 255, 255); margin-top: 20px; width: 100%; height: 45px; display: flex; justify-content: left; align-items: center; font-size: 16px; color: rgb(85, 85, 85); border: 0px; line-height: 2em;">
    <span style="display: inline-block;width: 4px;height: 18px;margin: 16px 10px;background-color:#c50a1d;"></span>用户须知<br/>
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    本产品的实际使用效果根据个人情况决定，不保证每位用户都能享受到所宣传的效果。若有疑问请咨询在线客服，本公司享有最终解释权。
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    ·关于发货方式
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    配送范围全台湾
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    ·关于配送时间
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    下单成功之后，我们会按照下单先后顺序进行配货，配货周期为3个工作日左右，一般到达时间为7个工作日左右。
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    ·如何申请退换货
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    1.由于质量原因产生的退换货：至收到商品之日起7天内，向售后服务中心发送邮件至包裹面单上的售后邮箱，客服会在收到邮件后的1-3个工作日内受理您的请求，退换货所产生的运费由我方承担。
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    2.退换货流程：
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    确认收货—申请退换货—客服审核通过—用户寄回商品—仓库签收验货—退换货审核—退款/换货；
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    退换货请注明：订单号、姓名、电话。
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    ·如何取消订单
</p>
<p style="background-color: transparent; color: rgb(204, 204, 204); font-size: 16px; border: 0px; line-height: 2em;">
    取消订单需要向售后服务中心发送邮件并注明相关原因，邮件内容应注明您的订单号、姓名、电话。
</p>
</div>


<script id="alizi-query" type="text/html">
    {{each list as value i}}
		<dl>
		<dt>
			<span href="javascript:;" class="user_name">{{if value.name}}{{value.name}}{{else}}匿名{{/if}}</span>{{if value.start != '5'}}满意度:{{/if}}<span class="{{value.start}}"></span>
			<span class="user_date">2018-08-22</span>
		</dt>
		<dd>
			{{#value.content}}
			{{if value.title}}<p class="comment-title">{{value.title}}</p>{{/if}}
			{{if value.reply_content}}<div class="reply">回复：{{#value.reply_content}}</div>{{/if}}
		</dd>
		</dl>
    {{/each}}
</script>
</script>
<script type="text/javascript">
seajs.use(['jquery','art/template','jquery/form'],function($,template){
	$('#commentsAjax').click(function(){ comments(5); })
	comments(5);
	function comments(page){
		var item_id = '{$info['id']}',commentsAjax=$('#commentsAjax');
		var currentPage = commentsAjax.attr('data-page');
		$.ajax({
		   type: "POST",
		   url: "{$alizi_root}index.php?m=Order&a=getComments",
		   data: {item_id:item_id,page:page,currentPage:currentPage},
		   dataType: 'json',
		   success: function(data){
				commentsAjax.attr('data-page',data.data.currentPage)
				commentsAjax.find('b').html(data.data.leftPage);
				var html = template('alizi-query', data.data);
				$('#comments').append(html);
				if(parseInt(data.data.leftPage)==0){ commentsAjax.hide(); }
		   }
		 });
	}
	$('.write-comment').on('click',function() {
	    $('.comment-frame').stop().slideToggle()
	});
	$('#aliziComment').ajaxForm({
		cache: true,
		timeout: 500,
		dataType: 'json',
		error:function(){ layer.closeAll(); alert(lang.ajaxError); },
		beforeSubmit:function(){
			layer.closeAll();layer.load();
		},
		success:function(data){
			if(data.status==1){
				$('#commentName').val('');
				$('#commentMobile').val('');
				$('#commentContent').val('');
			}
			layer.closeAll();layer.closeAll();
			layer.msg(data.info);
		}
	});
});

</script>
EOF;
return $aliziComment;
?>